<template>
  <a-breadcrumb>
    <a-breadcrumb-item>
      <router-link to="/internetData">
        <a-icon theme="filled" type="home" @click="selectHomeNav"/>
      </router-link>
    </a-breadcrumb-item>
    <a-breadcrumb-item
      v-for="(item,index) in breadList"
      v-if="item.name && item.name!='Home'"
      :key="index"
    >
      <router-link :to="{path:item.path}" @click.native="selectFirstNav(item.meta.key)">
        {{ item.meta.title }}
      </router-link>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
  export default {
    name: 'breadCrumb',
    data() {
      return {
        breadList: []    //路由集合
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    },
    methods: {
      getBreadcrumb() {
        let matched = this.$route.matched;
        this.breadList = matched;
      },
      //点击主页icon，导航选中“系统首页”
      selectHomeNav() {
        this.$store.commit('changeLastFirst', this.$store.state.firstNavSelectedKey)
        this.$store.commit('changeFirstNavSelected', "1")
      },
      //点击面包屑，二级导航选中相应模块
      selectFirstNav(key) {
        this.$store.commit('changeLastFirst', this.$store.state.firstNavSelectedKey)
      }
    },
    created() {
      this.getBreadcrumb();
    }
  }
</script>

<style scoped>
  .ant-breadcrumb .anticon {
    font-size: 20px;
  }
</style>
